<template>
  <a-layout>
    <a-layout-content>
      <a-row>
        <a-col :span="8" :offset="8">
          <div class="login">
            <div class="login-title">
              <h3>宠物领养后台管理系统</h3>
              <p>Pet Adoption Management System</p>
            </div>
            <a-form :model="loginModel" :rules="loginRules" ref="loginFormRef">
              <a-form-item
                :wrapperCol="{ span: 20, offset: 2 }"
                name="username"
                hasFeedback
              >
                <a-input
                  placeholder="请输入登录账号"
                  size="large"
                  autocomplete="off"
                  v-model:value="loginModel.username"
                >
                  <template #prefix>
                    <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
                  </template>
                </a-input>
              </a-form-item>
              <a-form-item
                :wrapperCol="{ span: 20, offset: 2 }"
                name="password"
                hasFeedback
              >
                <a-input-password
                  type="password"
                  placeholder="请输入登录密码"
                  size="large"
                  autocomplete="off"
                  allow-clear
                  v-model:value="loginModel.password"
                  @keyup.enter="loginSubmit"
                >
                  <template #prefix>
                    <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
                  </template>
                </a-input-password>
              </a-form-item>
              <a-form-item :wrapperCol="{ span: 20, offset: 2 }">
                <a-row type="flex" justify="space-between">
                  <a-col :span="5">
                    <a-button
                      type="primary"
                      size="large"
                      :loading="logining"
                      @click="loginSubmit"
                      >登录</a-button
                    >
                  </a-col>
                  <a-col :span="5">
                    <a-tooltip placement="topLeft">
                      <template #title>
                        <span>点击重置账号密码</span>
                      </template>
                      <a-button type="default" size="large" @click="resetForm"
                        >重置</a-button
                      >
                    </a-tooltip>
                  </a-col>
                </a-row>
              </a-form-item>
            </a-form>
          </div>
        </a-col>
      </a-row>
    </a-layout-content>
  </a-layout>
</template>

<script>
// 导入icon图标
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
// 导入校验规则
import { useLoginRules } from "./useLoginRules";
// 导入登录方法
import { useLoginSubmit } from "./useLoginSubmut";
// 导入重置表单方法
import { useResetForm } from "./useResetForm";

export default {
  name: "Login",
  components: {
    UserOutlined,
    LockOutlined,
  },
  setup() {
    // 表单校验
    const { loginRules } = useLoginRules();

    // 表单提交登录
    const { loginModel, loginFormRef, logining, loginSubmit } =
      useLoginSubmit();

    // 重置表单
    const { resetForm } = useResetForm(loginFormRef);

    return {
      loginRules, // 登录表单数据校验规则
      loginModel, // 登录表单数据
      loginFormRef, // 登录表单
      logining, // 登录的状态
      loginSubmit, // 登录方法
      resetForm, // 重置表单方法
    };
  },
};
</script>
<style scoped lang="less">
#app > .ant-layout {
  height: 100%;
  background-image: url("../../assets/images/login/bg.svg");
  background-repeat: no-repeat;
  background-size: cover;
}

.login {
  width: 400px;
  margin: 0 auto;
  margin-top: 180px;
}

.login-title {
  text-align: center;
  h3 {
    font-size: 30px;
    font-weight: 700;
  }
  p {
    font-size: 24px;
  }
}
</style>
